import Taro, { Component } from '@tarojs/taro'
import { AtButton  } from 'taro-ui'
import classnames from 'classnames'
import PropsType from 'prop-types'
import { View, Text, Image } from '@tarojs/components'
import '../styles/carinfo.scss'
import common from '@/common/'
const statusMortgage = common.statusMortgage
const carIcon = require('../assete/icon_car.png')
const box = require('../assete/check_box.png')
const checked = require('../assete/checked.png')
export default class DmorInfo extends Component {

    onDetail() {
        this.props.onDetail && this.props.onDetail()
    }

    firstClick(e) {
        e.stopPropagation()
        this.props.firstClick && this.props.firstClick()
    }

    secodeClick(e) {
        e.stopPropagation()
        this.props.secodeClick && this.props.secodeClick()
    }

    threeClick(e) {
        e.stopPropagation()
        this.props.threeClick && this.props.threeClick()
    }
    handlecheck(e) {
        e.stopPropagation()
        this.props.handlecheck && this.props.handlecheck()
    }
	onClickAction(Action){
	}
    render() {
        const {
            className,
			bank,
            nameList = ['奔驰', 'GLA200', '18款', '时尚'],
            infoList = ['中规', '国六', '现货', '外观颜色', '黑色'],
            place = '卖广东省',
            money = '60.00万元',
            mormoney = '60.99万元',
            firstText = '改价',
            secodeText = '发布同款',
            threeText = '下架',
            icon,
            company,
            clock,
            buttonList,
            item,
            check
        } = this.props
		const placeText = statusMortgage

        return <View className={classnames(check? 'flex__box': '', className)}>
              { check &&
                <View className='flex__img'>
                  <Image src={check === '1' ?checked:box} className='flex__check' onClick={this.handlecheck.bind(this)}></Image>
                </View>
              }
              <View className={classnames('b_carinfo', className)} onClick={this.onDetail.bind(this)}>
                <View className='b_carinfo__name'>
                    <View className='b_carinfo__name_text'>
                        <View className='item_icon'>
                            <Image src={icon || carIcon} className='item_icon__images'></Image>
                        </View>
                        <View className='item_text'>
                            {
                                nameList.map((item, i) => {
                                    return <View className='item_text__item' key={i}>{item||'--'}</View>
                                })
                            }
                        </View>
                    </View>

                    { /*+(+place>0?'close':'check')+'-circle'*/

                        +place>=0 && <View className={'b_carinfo__name_place at-icon at-icon-'+(+place>0?+place===1?'check':+place===2?'close':+place===3?'arrow-left':'clock':'clock')}>{placeText[+place||0]}</View>
                    }
                </View>
                <View className='b_carinfo__info'>
                    {
                        infoList.map((item, i) => {
                            return <Text className='item_info' key={i}>{item}</Text>
                        })
                    }
                </View>
                <View className='b_carinfo__money'>
                    <View className='item_money'>签件银行：{bank}</View>
                    {
                        +mormoney !== 0 && <View className='item_money'>贷款金额：<Text className='item_carmoney'>{window.toFixed(mormoney)}万元</Text></View>
                    }
                </View>
                <View className='b_carinfo__place'>
                    <View className='item_place'>{company}（{item.cusName}）</View>
                    <View className='item_time'>{clock}小时前</View>
                </View>
                <View className='b_carinfo__btn'>
                    {
                     buttonList && buttonList.map(ib => <AtButton onClick={(e)=> {
                      e.stopPropagation()
                      ib.onClick && ib.onClick(item, ib)
                     }}>{ib.text}</AtButton>)
                    }
                    {
                        firstText && <AtButton onClick={this.firstClick.bind(this)}>{firstText}</AtButton>
                    }
                    {
                        secodeText && <AtButton onClick={this.secodeClick.bind(this)}>{secodeText}</AtButton>
                    }
                    {
                        threeText && <AtButton onClick={this.threeClick.bind(this)}>{threeText}</AtButton>
                    }

                </View>
              </View>
            </View>
    }
}

DmorInfo.defaultProps = {
    className: '',
    nameList: ['奔驰', 'GLA200', '18款', '时尚'],
    infoList: ['中规', '国六', '现货', '外观颜色', '黑色'],
    place: '', //是否通过
    bank: '中国银行',
    mormoney: '',
    firstText: '',
    secodeText: '',
    threeText: '',
    icon: '',
    company: '广州一二三有限公司',
    clock:'',
    check:'',
    buttonList: [],
    onDetail: () => { },
    firstClick: () => { },
    secodeClick: () => { },
    threeClick: () => { }
}
DmorInfo.PropsType = {
    className: PropsType.oneOfType[PropsType.string, PropsType.object],
    nameList: PropsType.array,
    infoList: PropsType.array,
    place: PropsType.string,
    money: PropsType.string,
    mormoney: PropsType.string,
    firstText: PropsType.string,
    secodeText: PropsType.string,
    threeText: PropsType.string,
    icon: PropsType.string,
    company:PropsType.string,
    clock:PropsType.number,
    check:PropsType.string,
    buttonList:PropsType.array,
    onDetail: PropsType.func,
    firstClick: PropsType.func,
    secodeClick: PropsType.func,
    threeClick: PropsType.func
}
